<template>
  <div id="map" class="map"></div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import layerTile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import Overlay from "ol/Overlay";
import View from "ol/View";
import { Tile as TileLayer } from "ol/layer";
import TileArcGISRest from "ol/source/TileArcGISRest";
import { DragRotateAndZoom } from "ol/interaction";
import { OverviewMap, defaults as defaultControls } from "ol/control";

import CONSTANT from "@/config/constant.js";

export default {
  name: "overviewMap",

  methods: {
    createMap(divId) {
      var overviewMapControl = new OverviewMap({
        className: "ol-overviewmap ol-custom-overviewmap",
        layers: [
          // new TileLayer({
          //   source: new TileArcGISRest({
          //     url: CONSTANT.GIS_URL
          //   })
          // })
          new layerTile({
            source: new OSM(),
          }),
        ],
        collapseLabel: "\u00BB", //鹰眼展开时功能按钮上的标识
        label: "\u00AB", //鹰眼折叠时功能按钮上的标识
        collapsed: false //初始为展开显示方式
      });

      var map = new Map({
        controls: defaultControls().extend([overviewMapControl]), //第一种
        target: "map",
        layers: [
          // new TileLayer({
          //   source: new TileArcGISRest({
          //     url: CONSTANT.GIS_URL
          //   })
          // })
          new layerTile({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [113.0567, 23.67537],
          maxZoom: 18,
          minZoom: 8,
          zoom: 13,
          projection: "EPSG:4326"
        })
      });

      //第二种
      //map.addControl(overviewMapControl)
    }
  },

  mounted() {
    this.createMap("map");
  }
};
</script>

<style lang="less" scoped>
.map {
  height: 100%;

  /deep/ .ol-custom-overviewmap,
  /deep/ .ol-custom-overviewmap.ol-uncollapsible {
    bottom: auto;
    left: auto;
    right: 0;
    top: 0;
  }
  /deep/ .ol-custom-overviewmap {
    &:not(.ol-collapsed) {
      border: 1px solid black;
    }
    .ol-overviewmap-map {
      border: none;
      width: 300px;
    }
    .ol-overviewmap-box {
      border: 2px solid red;
    }
    &:not(.ol-collapsed) button {
      bottom: auto;
      left: auto;
      right: 1px;
      top: 1px;
    }
  }

  /deep/ .ol-rotate {
    top: 170px;
    right: 0;
  }
}
</style>